<template>
  <div>
    <el-upload class="avatar-uploader" :data="params" :action="upload.url" :show-file-list="false"
      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="uploadFile">
      <img v-show="false" />
    </el-upload>
            <el-table ref="multipleTable" :data="toutiaoList" border stripe style="width: 100%"
            tooltip-effect="dark">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="title" label="标题">
              <template slot-scope="scope">
                <span v-if="!scope.row.update">{{ scope.row.title }}</span>
                <el-input v-model="scope.row.title" v-if="scope.row.update"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="详情">
              <template slot-scope="scope">
                <span v-if="!scope.row.update">{{ scope.row.content }}</span>
                <el-input v-model="scope.row.content" v-if="scope.row.update"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="icon" label="图片" width="200">
              <template slot-scope="scope">
                <el-image v-if="scope.row.icon" style="width: 120px; height: 60px" :src="scope.row.icon"
                  :preview-src-list="srcList" fit="contain" @click="checkimg(scope.row.icon)"></el-image>
                <a style="color: #1890ff" @click="changeImg(scope.row, 'icon')">更换图片</a>
              </template>
            </el-table-column>
            <el-table-column prop="seeNum" label="查看次数">
              <template slot-scope="scope">
                <span v-if="!scope.row.update">{{ scope.row.seeNum }}</span>
                <el-input v-model="scope.row.seeNum" v-if="scope.row.update"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="labs" label="标签">
              <template slot-scope="scope">
                <span v-if="!scope.row.update">{{ scope.row.labs }}</span>
                <el-input v-model="scope.row.labs" v-if="scope.row.update"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <el-button v-if="scope.row.disabled == 0" type="danger" size="mini" @click="openClose(scope.row, 1)">禁用
                </el-button>
                <el-button v-if="scope.row.disabled == 1" type="success" size="mini" @click="openClose(scope.row, 0)">启用
                </el-button>
                <el-button type="success" size="mini" @click="scope.row.update = !scope.row.update">修改</el-button>
                <el-button type="success" size="mini" @click="saveAndUpdate(scope.row)">保存</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="toutiaoParams.pageNo" :page-sizes="[2, 5, 10, 15]" :page-size="toutiaoParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>

<script>
  export default {
    name: "news",
    data() {
      return {
        toutiaoList: [],
        toutiaoParams: {
          queryType: 1,
          pageNo: 1,
          pageSize: 10,
        },
        toutiaoTotal: 0,
        activeName: '1',
        upload: {
          url: "",
          token: "",
          domain: "",
        },
        total: 0,
        params: {},
        rows: {},
        imgName: "",
        row: {},
      };
    },
    props: ['toutiaoList','upload','total','rows','imgName'],
    created() {
       /*this.gettoutiaolist();*/
      this.qiNiuYun();
    },
    methods: {
      openClose(item,type){
        item.disabled=type;
        this.$http.post("/manage/conf/editNews", item).then((res) => {
            this.gettoutiaolist();
        });
      },
      saveAndUpdate(item){
        this.$http.post("/manage/conf/editNews", item).then((res) => {
          this.gettoutiaolist();
        });
      },
      handlePictureCardPreviewNew(file) {
        // this.dialogImageUrl = file.url;
        // this.dialogVisiblePrient = true;
      },
      beforeAvatarUpload(file) {
        this.params.key = new Date().getTime(); //file.name;
      },
      handleAvatarSuccess(res, file) {
        this.row["icon"] = this.upload.domain + res.key;
      },
      changeImg(rows, imgName) {
        this.row=rows;
        document.getElementsByClassName("el-upload__input")[0].click();
        this.rows = rows;
        this.imgName = imgName;
      },
      handleRemoveNew(file, fileList) {
        console.log(file, fileList);
        // const index = this.addForm.pics.findIndex(x => x === file.url)
        // // 根据索引。把 表单中记录的图片信息对象，删除
        // this.addForm.pics.splice(index, 1)
        // console.log(this.addForm.pics);
      },
      beforeUploadNew(file) {
        this.params.key = file.name;
      },
      uploadFile() {
        this.qiNiuYun();
        this.$message.error("上传失败，请重试");
      },
      qiNiuYun() {
        this.$http.post("/userFile/qiNiuUpload", {}).then((res) => {
          console.log(res);
          this.upload.token = res.data.data.token;
          this.upload.domain = res.data.data.domain;
          this.upload.url = res.data.data.upload_url;
          this.params.token = res.data.data.token;
          console.log(this.upload);
        });
      },
      handleClick(tab, event) {
        if (this.activeName == '1' || this.activeName == "2" || this.activeName == "3" || this.activeName == "4") {
          this.toutiaoParams.pageNo = 1;
          this.toutiaoParams.queryType = this.activeName;
          this.gettoutiaolist();
        }
      },
      searchDrow(e) {
        console.log(e);
        this.searchfrom.queryType = e;
        this.searchfrom.pageNo = 1;
        this.getuserlist();
      },
      editExpress(item) {
        // this.$confirm("确认修改快报信息？", "提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning",
        // })
        //   .then(() => {
        //     this.$http.post("/manage/conf/editQuick", item).then((res) => {
        //       // console.log(res)
        //       if (res.data.status == 1) {
        //         this.$message({
        //           message: "修改成功",
        //           type: "success",
        //         });

        //         this.getuserlist();
        //       }
        //     });
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消",
        //     });
        //   });
      },

      gettoutiaolist(type) {
        this.toutiaoParams.queryType = this.activeName;
        this.$http.post("/manage/conf/newsList", this.toutiaoParams).then((res) => {
          if (res.data.status == 1) {
            res.data.data.list.forEach((item) => {
              item.update = false;
            });
            this.toutiaoList = res.data.data.list;
            this.total = res.data.data.total;
          }
        });
      },
      // 监听 pagesize 的变化
      handleSizeChange(newSize) {
        // 把最新的 pagesize 赋值给 this.queryinfo
        this.toutiaoParams.pageSize = newSize;
        this.gettoutiaolist();
      },
      // 监听 页码值 的变化
      handleCurrentChange(newPageNum) {
        console.log(newPageNum);
        this.toutiaoParams.pageNo = newPageNum;
        this.gettoutiaolist();
      },
    },
  };
</script>

<style>
</style>
